<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bulma.css">
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            待办事项列表
          </h1>
          <h2 class="subtitle">
            今天的事情今天做，明天才有时间做更多的事情
          </h2>
        </div>
      </div>
    </section>
    <div class="container is-widescreen" style="margin: 30px auto;">
      <div class="columns">
        <div class="column is-one-quarter">
          <input
            type="text"
            placeholder="输入代办事项名称"
            class="input"
            v-model="inputValue"
            @keyup.13="addTodo"
          >
        </div>
        <div class="column is-one-quarter">
          <button @click="addTodo" class="button is-primary">添加</button>
        </div>
      </div>
    </div>
    <div class="container is-widescreen">
      <nav class="panel">
        <p class="panel-heading">
          已完成
        </p>
        <div class="panel-block columns is-multiline">
          <div
            class="column is-one-quarter"
            v-for="todo in hasFinishedTodos"
            :key="todo.id"
          >
            <div class="card">
              <header class="card-header">
                <p class="card-header-title">
                  代办事项
                </p>
                <a href="#" class="card-header-icon" aria-label="more options">
                  <button class="delete" @click="removeTodo(todo.id)"></button>
                </a>
              </header>
              <div class="card-content">
                <div class="content">
                  {{todo.title}}
                </div>
              </div>
              <footer class="card-footer">
                <a
                  href="javascript:;"
                  :class="['card-footer-item', todo.hasFinished ? 'has-text-success' : 'has-text-danger']"
                >
                  {{ todo.hasFinished ? '已完成' : '未完成' }}
                </a>
                <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished(todo.id)">
                  切换为{{ todo.hasFinished ? '未' : '已' }}完成
                </a>
              </footer>
            </div>
          </div>
        </div>
      </nav>
      <nav class="panel">
        <p class="panel-heading">
          未完成
        </p>
        <div class="panel-block columns is-multiline">
          <div
            class="column is-one-quarter"
            v-for="todo in unFinishedTodos"
            :key="todo.id"
          >
            <div class="card">
              <header class="card-header">
                <p class="card-header-title">
                  代办事项
                </p>
                <a href="#" class="card-header-icon" aria-label="more options">
                  <button class="delete" @click="removeTodo(todo.id)"></button>
                </a>
              </header>
              <div class="card-content">
                <div class="content">
                  {{todo.title}}
                </div>
              </div>
              <footer class="card-footer">
                <a
                  href="javascript:;"
                  :class="['card-footer-item', todo.hasFinished ? 'has-text-success' : 'has-text-danger']"
                >
                  {{ todo.hasFinished ? '已完成' : '未完成' }}
                </a>
                <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished(todo.id)">
                  切换为{{ todo.hasFinished ? '未' : '已' }}完成
                </a>
              </footer>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        inputValue: '',
        todos: [
          {
            id: 1,
            title: '吃饭',
            hasFinished: true
          },
          {
            id: 2,
            title: '睡觉',
            hasFinished: false
          },
          {
            id: 3,
            title: '写代码',
            hasFinished: false
          }
        ]
      },
      computed: {
        hasFinishedTodos () {
          return this.todos.filter(todo => todo.hasFinished)
        },
        unFinishedTodos () {
          return this.todos.filter(todo => !todo.hasFinished)
        }
      },
      methods: {
        toggleHasFinished (id) {
          this.todos = this.todos.map(todo => {
            if (todo.id === id) todo.hasFinished = !todo.hasFinished
            return todo
          })
        },
        removeTodo (id) {
          // 咱们还是从所有todos里去删，computed计算出来的属性不会直接操作
          this.todos = this.todos.filter(todo => {
            return todo.id !== id
          })
        },
        addTodo () {
          if (this.inputValue === '') return
          this.todos.push({
            id: Date.now(),
            title: this.inputValue,
            hasFinished: false
          })
          // 吧input清空
          this.inputValue = ''
        }
      }
    })
  </script>
</body>
</html>
